import React,{useState} from 'react';
import PropTypes from 'prop-types';
import {Grid, List} from 'antd-mobile';

import avatars from "../assets/js/avatar";
const data = Array.from(new Array(16)).map((_val, i) => ({
    icon: avatars[`avatar_${i+1}`],
    text: `头像${i+1}`,
}));
Avatarlist.propTypes = {
    avatar: PropTypes.string.isRequired,
    setAvatar: PropTypes.func.isRequired
}
export default function Avatarlist (props) {

    const [avatar,setAvatar] = useState(props.avatar)
    const header = avatar===''?'请选择头像':(
        <p>已选择头像：<img style={{width:'50px',borderRadius:'50%'}} src={avatars[`avatar_${avatar}`]} alt=""/></p>
    );
    const handleClick = (el, index) => {
        setAvatar(index+1)
        props.setAvatar(index+1)
    }
    return (
        <div>
            <List renderHeader={() => header}>
                <Grid data={data} onClick={handleClick}/>
            </List>
        </div>
    )

}